<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/7 22:53
    @Version 1.0
    @Description 文件说明
  -->
    <meta charset="utf-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="layui-tab"  lay-allowClose="true" lay-filter = "myTab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>
<button id="addTab">新增选项</button>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['element','jquery'],function(){
        var element = layui.element;
        var $ = layui.jquery;
           //选项卡事件
        //选项卡切换事件
        // element.on('tab(myTab)',function (data) {
        //     console.log(this); //当前Tab标题所在的原始DOM元素
        //     console.log(data.index); //得到当前Tab的所在下标
        //     console.log(data.elem); //得到当前的Tab大容器
        // });
        //选项卡删除事件
        element.on('tabDelete(myTab)', function(data){
            console.log(this); //当前Tab标题所在的原始DOM元素
            console.log(data.index); //得到当前Tab的所在下标
            console.log(data.elem); //得到当前的Tab大容器
        });
        //方法1：新增选项卡
        $("#addTab").get(0).onclick = function () {
            var tab = {
                title: '新增标题',
                content: '要添加的内容',
                id: 12
            };
            element.tabAdd("myTab",tab);
        };

        //方法2：绑定点击事件
        // $("#addTab").click(function () {
        //         var tab = {
        //             title: '新增标题',
        //             content: '要添加的内容',
        //             id: 12
        //         };
        //         element.tabAdd("myTab",tab);
        //     });
    });
</script>
</body>
</html>

